<!-- TODO
配合ucharts 实现图例
 list:[
	 {
		 data:'24', //展示的数据
		 name:'打卡次数',//数据的名字
		 color:'图例的颜色',
	 }
 ]
 -->
<template>
	<view class="views">
		<view class="viewItem" v-for="(i,index) in list" :style="{animation:`show ${0.5+index*0.2}s`}" @tap="tapitem(index,i)">
			<view class="info">
				<view class="colorBock" v-if='i.color' :style="{background:i.color}"></view>
				<text>{{i.data}}</text>
			</view>
			<view class="info">{{i.name}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			list:{
				type:Array,
				default:[],
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			tapitem(index,info){
				this.$emit('change',index,info)
			},
		}
	}
</script>

<style  lang="scss">
	
	.views {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		transition: 0.2s;
		min-height: 150rpx;
		.viewItem {
			display: flex;
			flex-direction: column;
			background-color: #f2f2f2;
			border-radius: 10rpx;
			padding: 20rpx 20rpx;
			flex: 1;
			margin: 10rpx 8rpx;
			transition: 0.2s;
			&:active{
				opacity: 0.7;
				transform: scale(0.9);
			}
			.info {
				font-size: 12px;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				display: flex;
				align-items: center;
				white-space: nowrap;
				.colorBock {
					height: 25rpx;
					width: 10rpx;
					margin-right: 10rpx;
				}

				text {
					display: flex;
					
					color: #333333;
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
	}
	
	

</style>
